<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>纳新第一页</title>
</head>
<body>
  <script src="C:\Users\10456\Desktop\ma\vue\vue.js"></script>
  <div id="app">
    <div>
      <input v-model="parentMsg"> <!-- 用了个表单双向操作 -->
      <br>
      <child v-bind:message="parentMsg"></child>
    </div>
</div>
 
<script>
// 注册
Vue.component('child', {
  // props中是传递的数据对象
  props: ['message'],
  // template中是child标签所对应的html代码
  template: '<span>{{ message }}</span>'
})
// 创建根实例
new Vue({
  el: '#app',
  data: {
    parentMsg: '父组件内容'
  }
})
</script>
</body>
</html>